<template>
  <nav class="axiom-pc-top-nav">
    <template v-for="item in menuItems" :key="item.id">
      <div 
        class="nav-item"
        @mouseenter="showSubMenu(item.id)"
        @mouseleave="hideSubMenu(item.id)"
      >
        <router-link :to="item.path" class="nav-link" :class="{ 'is-active': isRouteActive(item) }">
          <axiom-icon v-if="item.icon" :name="item.icon" class="nav-icon" />
          <span class="nav-title">{{ item.title }}</span>
          <axiom-icon v-if="hasChildren(item)" name="fas fa-chevron-down" class="nav-arrow" />
        </router-link>

        <transition name="fade">
          <div 
            v-if="hasChildren(item) && activeSubMenu === item.id" 
            class="sub-menu-wrapper"
          >
            <div class="sub-menu">
              <router-link
                v-for="child in item.children"
                :key="child.id"
                :to="child.path"
                class="sub-menu-item"
                :class="{ 'is-active': isRouteActive(child) }"
              >
                <axiom-icon v-if="child.icon" :name="child.icon" class="nav-icon" />
                <span class="nav-title">{{ child.title }}</span>
              </router-link>
            </div>
          </div>
        </transition>
      </div>
    </template>
  </nav>
</template>

<script>
import AxiomIcon from '../common/AxiomIcon.vue';

export default {
  name: 'AxiomPCTopNav',
  components: {
    AxiomIcon
  },
  props: {
    menuItems: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      activeSubMenu: null,
      hideSubMenuTimer: null,
    };
  },
  methods: {
    hasChildren(item) {
      return item.children && item.children.length > 0;
    },
    showSubMenu(itemId) {
      clearTimeout(this.hideSubMenuTimer);
      this.activeSubMenu = itemId;
    },
    hideSubMenu() {
      this.hideSubMenuTimer = setTimeout(() => {
        this.activeSubMenu = null;
      }, 200); // 延迟关闭，以方便用户将鼠标移动到子菜单上
    },
    isRouteActive(item) {
        if(!item.path) return false;
      // 检查当前路由是否完全匹配或以菜单项路径为前缀
      return this.$route.path.startsWith(item.path);
    }
  }
};
</script> 